<template>
  <div id="warp-tow">
    <div class="time">填报时间：2020-09-24</div>
    <div class="one">
      <h1>二、孵化运营和服务状况</h1>
    </div>
    <!-- <div class="warp-name-input"> -->

    <div class="unit-name">
      <p class="char">年度累计众创空间总收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{abc === '' ? this.default : (abc / 10).toFixed(2)}} 万元，{{ this.default }} , </p>
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="620.6" class="unit-input" v-model="abc"></a-input>
    </div>

    <div class="unit-name">
      <p class="char">其中：服务收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning === '' ? this.income : (earning / 10).toFixed(2)}} 万元，{{ this.income }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="120.6" class="unit-input" v-model="earning"></a-input>
    </div>

    
    <div class="unit-name">
      <p class="char">物业收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning2 === '' ? this.income2 : (earning2 / 10).toFixed(2)}} 万元，{{ this.income2 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="0" class="unit-input" v-model="earning2" style="margin-right:70px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">投资收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning3 === '' ? this.income3 : (earning3 / 10).toFixed(2)}} 万元，{{ this.income3 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="0" class="unit-input" v-model="earning3" style="margin-right:100px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">财政补贴</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning4 === '' ? this.income4 : (earning4 / 10).toFixed(2)}} 万元，{{ this.income4 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="500" class="unit-input" v-model="earning4" style="margin-right:70px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">其他</p>
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning5 === '' ? this.income5 : (earning5 / 10).toFixed(2)}} 万元，{{ this.income5 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="0" class="unit-input" v-model="earning5" style="margin-right:100px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">本季度众创空间总收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning6 === '' ? this.income6 : (earning6 / 10).toFixed(2)}} 万元，{{ this.income6 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="608.05" class="unit-input" v-model="earning6"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">其中：服务收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning7 === '' ? this.income7 : (earning7 / 10).toFixed(2)}} 万元，{{ this.income7 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="173.51" class="unit-input" v-model="earning7"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">物业收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning8 === '' ? this.income8 : (earning8 / 10).toFixed(2)}} 万元，{{ this.income8 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="365" class="unit-input" v-model="earning8" style="margin-right:80px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">投资收入</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning9 === '' ? this.income9 : (earning9 / 10).toFixed(2)}} 万元，{{ this.income9 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="64.93" class="unit-input" v-model="earning9" style="margin-right:50px;"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">财政补贴</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning10 === '' ? this.income10 : (earning10 / 10).toFixed(2)}} 万元，{{ this.income10 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="4.61" class="unit-input" v-model="earning10"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">其他</p>
      <div class="session">
        <span class="session-span">千元</span>
        <p>&nbsp;&nbsp;{{earning11 === '' ? this.income11 : (earning11 / 10).toFixed(2)}} 万元，{{ this.income11 }} , </p>
        
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>
      <a-input placeholder="0" class="unit-input" v-model="earning11"></a-input>
    </div>
    <div class="unit-name">
      <p class="char">本季度开展创新创业活动场次</p>
      <a-icon type="question-circle" class="icon-circle" title="帮助" />
      
      <div class="session">
        <span class="session-span">场次</span>
        <p> {{session}} </p>
        <span class="session-blu">{{b}}</span>
        <span class="session-span">下降：</span>
        <h6>{{percentage}}</h6>
      </div>

      <a-input placeholder="21" class="unit-input"></a-input>
    </div>

    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data(){
    return{
      'session' : '21',
      'a' : '0',
      'b' : '0',
      'percentage' : '100%',
      abc : "",
      earning : "",
      earning2 : "",
      earning3 : "",
      earning4 : "",
      earning5 : "",
      earning6 : "",
      earning7 : "",
      earning8 : "",
      earning9 : "",
      earning10 : "",
      earning11 : "",
      default : '62.06',
      income : '12.06',
      income2 : '0',
      income3 : '0',
      income4 : '500',
      income5 : '0',
      income6 : '608.05',
      income7 : '173.51',
      income8 : '365',
      income9 : '64.93',
      income10 : '4.61',
      income11 : '0'
    }
  }
};
</script>

<style lang="scss" scoped>
#warp-tow {
  .time {
    font-size: 16px;
    color: #2ccce4;
    margin-bottom: 20px;
  }
  .one {
    font-size: 16px;
    color: #000;
  }
  .warp-name-input {
    width: 400px;
  }
  .unit-name {
    height: 50px;
    width: 900px;
    background: rgb(231, 228, 228);
    margin-top: 10px;
    overflow: hidden;
    .char {
      line-height: 50px;
      margin-left: 50px;
      float: left;
      font-size: 16px;
      color: #000;
    }
    .unit-input {
      margin-top: 10px;
      margin-right: 50px;
      float: right;
      width: 200px;
      border: ceil($number: 0);
    }
    .icon-circle {
      float: left;
      line-height: 53px;
      margin-left: 20px;
    }
    .session{
      float:right;
      .session-span{
        color:#000;
        text-align: left;
      }
      p{
        display: inline;
        line-height: 50px;
        color: red;
      }
      .session-blu{
        color: blue;
      }
      h6{
        display: inline;
        line-height: 50px;
        color: red;
        margin-right:40px;
      }
    }
  }
}
</style>